<template>
  <div class="strut-div">
    <div class="strut-div">
      <div :id="config.id" class="strut-div"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import autoHover from "@/util/autoHover.js";
export default {
  name: "CommonLineChart",
  props: ["config"],
  // watch: {
  //   config: {
  //     handle: function() {
  //       this.initChart();
  //     },
  //     deep: true,
  //   },
  // },
  data() {
    return {
      chart: null,
      timeTicket: null,
    };
  },
  methods: {
    initChart() {
      let option = {
        color: ["#FFEA2E", "#2BFCFF", "#E9B6F4", "#e5323e"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["Forest", "Steppe", "Desert", "Wetland"],
          textStyle: {
            color: "#c3dbff", //更改坐标轴文字颜色
            fontSize: 14, //更改坐标轴文字大小
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["2012", "2013", "2014", "2015", "2016"],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#c3dbff", //更改坐标轴文字颜色
                fontSize: 14, //更改坐标轴文字大小
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            precision: 1,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#c3dbff", //更改坐标轴文字颜色
                fontSize: 14, //更改坐标轴文字大小
              },
            },
            nameTextStyle: {
              color: "#c3dbff",
              fontSize: 14,
            },
          },
        ],
        series: [
          {
            name: "Forest",
            type: "bar",
            data: [320, 332, 301, 334, 390],
          },
          {
            name: "Steppe",
            type: "bar",
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "Desert",
            type: "bar",
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "Wetland",
            type: "bar",
            data: [98, 77, 101, 99, 40],
          },
        ],
      };
      if (this.config.id) {
        option.legend.data = this.config.legend;
        option.xAxis[0].data = this.config.xAxis;
        option.series = this.config.series;
        option.yAxis[0].name = this.config.yAxisName;
        console.log(this.config.id);
        console.log(document.getElementById(this.config.id));
        // option.yAxis[0].max = Math.floor(this.config.series.reduce((total, item) => {
        //   const arr = item.data.sort(function(a, b) {
        //     return a - b;
        //   });
        //   return total > arr[arr.length - 1] ? total : arr[arr.length - 1];
        // }, 0));
        this.$nextTick(() => {
          this.chart = echarts.init(document.getElementById(this.config.id));
          this.chart.setOption(option);
          this.timeTicket = autoHover.autoHover(
            this.chart,
            option,
            option.xAxis[0].data.length,
            2000
          );
        });
      }
    },
    refreshChart() {},
  },
  mounted() {
    console.log(this.config.id);
  },
  beforeDestroy() {
    autoHover.stopHover(this.timeTicket);
  },
};
</script>
